<template>
  <Table
      ref="table"
      :searchColumns="searchColumns"
      description_keywords="interfaceList"
      @getTableList="getTableList"
  >
    <template #tableHeader="scope">
      <el-button type="primary" :icon="CirclePlus" @click="addInterfaceToSourceList">新增接口</el-button>
      <!--        <el-button  type="primary" :icon="Upload" plain @click="">批量添加菜单</el-button>-->
      <!--        <el-button  type="primary" :icon="Download" plain @click="">导出菜单数据</el-button>-->
      <!--        <el-button type="primary" plain @click="">To 子集详情页面</el-button>-->
      <!--        <el-button type="danger" :icon="Delete" plain  @click="">-->
      <!--          批量删除菜单-->
      <!--        </el-button>-->
    </template>
    <template #table>
      <el-table :data="tableList"
                row-key="id"
                border
                style="width: 100%">
        <el-table-column prop="name" fixed="left" align="center" label="接口名称" width="200"/>
        <el-table-column prop="method" align="center" label="请求方式" width="200"/>
        <el-table-column prop="path" align="center" label="请求路径" width="200"/>
        <el-table-column prop="type_display" align="center" label="请求类型" width="200"/>
        <el-table-column prop="description" align="center" label="接口描述" min-width="200"/>
        <el-table-column prop="create_time" align="center" label="创建时间" width="170"/>
        <el-table-column prop="update_time" align="center" label="最近修改时间" width="170"/>
        <el-table-column align="center" fixed="right" label="操作" min-width="200">
          <template #default="scope">
            <el-button
                @click=""
                size="small">编辑
            </el-button>
            <el-button
                size="small"
                @click=""
                type="danger">删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </template>
  </Table>

</template>

<script setup>
import Table from "@/components/Table/index.vue";
import {CirclePlus} from "@element-plus/icons-vue";
import {onMounted, onUnmounted, ref, watch} from "vue";
import {getGuidApi} from "@/api/modules/system/common.js";
import {getInterfaceListApi} from "@/api/modules/interface/interface.js";
import {useInterfaceStore} from "@/stores/modules/interface/interface.js";
import {storeToRefs} from "pinia";

const interfaceStore = useInterfaceStore()

const {
  currentActiveTab,
  showInterfaceList,
  selectedInterfaceCatName,
  selectedInterfaceCatId
} = storeToRefs(interfaceStore)

// 需要搜索的配置项
const searchColumns = ref([
  // {label: "模块名称", field: "project_name", searchType: "input", default: "", disabled: true},
  {label: "接口名称/路径", field: "name", searchType: "input"},
])


const tableList = ref([])

onMounted(() => {
  getTableList()
})

const table = ref(null)
const searchArgsDict = ref({})
const getTableList = async (searchArgs) => {
  searchArgs["cat"] = selectedInterfaceCatId.value
  const {data} = await getInterfaceListApi(searchArgs)
  searchArgsDict.value = searchArgs
  tableList.value = data.data
  table.value.pageable.pageNum = data.page
  table.value.pageable.pageSize = data.pagesize
  table.value.pageable.total = data.total
}


onMounted(() => {
  // 模块点击时，执行该事件
  $eventBus.on("interfaceCatNodeClick", () => {
    getTableList(searchArgsDict.value)
  })
})

onUnmounted(() => {
  $eventBus.off("interfaceCatNodeClick")
})

// 新增接口。即添加一个初始化模板到接口资源的列表中，并选中该接口
const addInterfaceToSourceList = async () => {
  await getGuidApi().then(res => {

    // 更该显示的TAB页为新增的TAB
    currentActiveTab.value = res.data

    // 添加一个初始化的接口资源
    interfaceStore.addInitInterfaceSource()

    // 不显示接口列表的页面
    showInterfaceList.value = false
  })
}


</script>

<style lang="scss">

</style>
